<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>particle</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <style>
        html, body{
            width : 100%;
            height : 100%;
            margin : 0;
            padding : 0;
        }

        body{
            background-color : #222;
            overflow : hidden;
        }
    </style>
    <canvas>
    </canvas>
    <script>
        var canvas = document.querySelector('canvas');
        var ctx = canvas.getContext('2d');
        var wW = window.innerWidth;
        var wH = window.innerHeight;
        var COLORS = ['#69D2E7', '#A7DBDB', 'E0E4CC', '#F38630', '#FA6900', '#FF4E50', '$F9D423',];
        canvas.width = wW;
        canvas.height = wH;
        var pars = [];

        render();

        function particle(opt){
            this.init(opt);
        }

        particle.prototype = {
            init:function(opt){
                this.x = opt.x || 0;
                this.y = opt.y || 0;
                this.r = random(2, 20);
                this.c = random(COLORS);
                this.f = random(2, 8);
                this.t = random(0, Math.PI * 2);

                this.vX = Math.cos(this.t) * this.f;
                this.vY = Math.sin(this.t) * this.f;
            },
            update:function(){
                this.x += this.vX;
                this.y += this.vY;

                this.vX += Math.cos(this.t) * this.f;
                this.vY += Math.sin(this.t) * this.f;

                this.vX *= .2;
                this.vY *= .2;
            },
            draw:function(ctx){
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2);
                ctx.fillStyle = this.c;
                ctx.fill();
            }
        }

        canvas.onmousemove = function(e){
            var eX = e.pageX;
            var eY = e.pageY;
            spawn(eX, eY);
        }

        function spawn(eX, eY,){
            var par = new particle({x : eX, y : eY});
            pars.push(par);
        }

        function random(min, max){
            if(min.sort){
                return min[~~(Math.random() * min.length)];
            }else{
                return ~~(min + Math.random() * (max - min));
            }
        }

        function isArray(obj){
            return Object.prototype.toString.call(obj) === '[Object Array]'
        }

        function render(){
            ctx.clearRect(0, 0, wW, wH);
            for(var i = 0, len = pars.length; i < len ; i++){
                pars[i].draw(ctx);
                pars[i].update();
            }
            requestAnimationFrame(render);
        }
    </script>
</body>
</html>
